<template>
  <div class="table-cell aa">
        <div class="center-form">
            <router-link to="/home" class="cf-logo pc-vertical"><img :src="logo" ></router-link>
            <!-- <router-link to="/busregister" v-if="$route.path != '/busregister'" class="change-version">商家版</router-link> -->
            <!-- <router-link to="/userregister"  class="change-version">个人版</router-link> -->
            
            <p class="title title2">猪爸爸微信注册</p>
            <!-- <div class="form-box">
                <p class="desc">请输入您的手机号与验证码</p>
            </div> -->
            <el-form ref="form" :rules="rules" class="form-box" :model="form" label-width="80px">
                <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号" v-model.trim="form.phone" class="input-with-select">
                    <!-- <el-select v-model.trim="phoneArea" slot="prepend" placeholder="请选择">
                        <el-option label="中国+86" value="1"></el-option>
                    </el-select> -->
                    </el-input>
                </el-form-item>
                <el-form-item class="yzm" prop="yzm">
                <el-input placeholder="请输入验证码" v-model.trim="form.yzm" class="input-with-select"></el-input>
                <div class="box">
                    <a v-if="isYZMShow" href="javascript:;" class="btn-get-code" @click="getYZM">获取短信验证码</a>
                    <div v-else class="timer">
                        {{ time }} s
                    </div>
                </div>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input placeholder="请输入邮箱" v-model.trim="form.email" class="input-with-select">
                        <!-- <template slot="prepend">请输入邮箱</template> -->
                    </el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <el-input placeholder="请输入密码" type="password" v-model.trim="form.pass" class="input-with-select">
                        <!-- <template slot="prepend">请输入密码</template> -->
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div class="fb-submit">
                        <button class="btn-submit" type="button" @click="submitForm('form')">注册并绑定</button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <copy></copy>
    </div>
</template>

<script>
import logo from "@/assets/images/logo.png";
import copy from "@/components/copyRight.vue";

export default {
    components: {
        copy
    },
    data () {
        var validatephone = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('手机号不能为空'));
            }
            if(!(/^1[3456789]\d{9}$/.test(value))){
            return callback(new Error('手机号格式不正确!'));
            }
            callback();
        };
        var validateyzm = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('验证码不能为空'));
            }
            
            callback();
        };
        var validateemail = (rule, value, callback) => {
           
            if (!value) {
            return callback(new Error('邮箱不能为空！'));
            }
            if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))){
            return callback(new Error('邮箱格式不正确!'));
            }
            callback();
        };
        var validatepass = (rule, value, callback) => {
            
            if (!value) {
            return callback(new Error('密码不能为空'));
            }
            
            callback();
        };
        return {
            logo,
            phoneArea:"中国+86",
            isYZMShow:true,
            time:60,
            form: {
            phone:"",
            yzm:"",
            email:"",
            pass:""
            },
            rules: {
            phone: [
                { validator: validatephone, trigger: 'blur' }
            ],
            yzm: [
                { validator: validateyzm, trigger: 'blur' }
            ],
            email: [
                { validator: validateemail, trigger: 'blur' }
            ],
            pass: [
                { validator: validatepass, trigger: 'blur' }
            ],
            }
        }
        },
        methods: {
        
        submitForm(formName) {
            
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$ajax.post("/weiChat/createUser",{
                    state: sessionStorage.getItem('uuid'),
                    mobile: this.form.phone,
                    email: this.form.email,
                    verifyCode: this.form.yzm,
                    pwd: this.form.pass
                }).then(res => {
                    console.log(res,'创建成功')
                    if(res.data.code == 0){
                        localStorage.setItem("key",JSON.stringify(res.data.data.sessionKey));
                        this.$ajax.defaults.headers.common['user-session'] = res.data.data.sessionKey;
                        this.$message({
                            message: '提示注册成功!',
		                    type: 'success'
                        });
                        setTimeout(() => {
                            this.$router.push('/info')
                        }, 1000);
                    }
                }).catch(err =>{
                    console.log(err,'异常')
                })
                
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        postYZM(){
            this.$ajax.post("/user/sendMobileCode",{
                type:0,
                mobile:this.form.phone
            },)
            .then((res)=>{
                
                if(res.data.code == 0){
                this.$message({
                    message: '验证码发送成功!',
                    type: 'success'
                });
                // window.location.href = "register-bus-step02.html";
                }else[
                this.$message.error(res.data.msg)
                ]
            })
        },
        getYZM(){
            if(this.form.phone == "" ){
            this.$message.error('手机号不能为空!');
            return ;
            }
            if(!(/^1[3456789]\d{9}$/.test(this.form.phone))){
            this.$message.error('手机格式不正确!');
            return ;
            }
            this.postYZM(); // 向后台请求数据
            this.isYZMShow = !this.isYZMShow;
            let i = 60;
            var timer = setInterval(()=>{
            i -- ;
            if(i == 0){
                this.isYZMShow = !this.isYZMShow;
                clearInterval(timer);
                i = 60;
            }else{
                this.time = i;
            }
            
            },1000)
        }
    }
}
</script>

<style scoped>
.center-form .title2{
    font-size: 28px;
}
</style>